<template>
	<view class="user-select field-form-item">
		<u-form-item
			:label="label"
			:required="required"
			:prop="prop"
			:right-icon="disabled ? '' : 'arrow-right'"
		>
			<view @click="onClick" style="width: 100%; height: 37px">
				<text v-if="selectValue == null || selectValue === ''" style="color: rgb(192, 196, 204)">{{ placeholder }}</text>
				<text v-else>{{ selectValue }}</text>
			</view>
			<u-popup v-if="showSelectDlg" v-model="showSelectDlg" mode="left" length="100%"
				style="background: #F6F6F6;">
				<user-select-dlg
					:rowKey="props.value"
					:value="value"
					:multiple="multiple"
					:filterObject="filterObject"
					@input="onSelectChange"
					@close="onCloseSelectDlg" />
			</u-popup>
		</u-form-item>
	</view>
</template>

<script>
	import { SysCommonBizController } from '@/api';
	import UserSelectDlg from './userSelectDlg.vue';
	import { validateWidget } from '@/utils/validate.js';
	export default {
		name: 'userSelect',
		props: {
			label: {
				type: String,
				// default: '用户选择'
			},
			value: {
				type: [String, Number, Array]
			},
			prop: {
				type: String
			},
			props: {
				type: Object,
				default: () => {
					return {
						label: 'showName',
						value: 'userId'
					}
				}
			},
			multiple: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String
			},
			rules: {
				type: Array
			},
			filterObject: {
				type: Object
			}
		},
		components: {
			UserSelectDlg
		},
		data() {
			return {
				showSelectDlg: false,
				selectedItems: [],
				errorMessage: ''
			}
		},
		methods: {
			onClick() {
				if (this.disabled) return;
				this.showSelectDlg = true;
			},
			onCloseSelectDlg() {
				this.showSelectDlg = false;
			},
			onSelectChange(val) {
				let temp = this.multiple ? val : val[0];
				this.$emit('input', temp);
				this.$emit('change', temp);
			},
			getSelectItems () {
				return this.selectedItems;
			},
			getSelectUserList() {
				let params = {
					widgetType: 'upms_user'
				};
				if (this.value == null || this.value.length <= 0) this.selectedItems = [];
				if (this.multiple) {
					params.fieldValues = Array.isArray(this.value) ? this.value : []
				} else {
					params.fieldValues = Array.isArray(this.value) ? this.value[0] : this.value;
					params.fieldValues = params.fieldValues == null ? [] : [params.fieldValues];
				}
				if (Array.isArray(params.fieldValues) && params.fieldValues.length > 0) {
					params.fieldValues = params.fieldValues.join(',');
					SysCommonBizController.viewByIds(this, params).then(res => {
						if (Array.isArray(res)) this.selectedItems = res;
					}).catch(e => {
					});
				}
			},
			validateWidget() {
				return new Promise((resolve, reject) => {
					validateWidget(this.rules, this.value).then(res => {
						this.errorMessage = '';
						resolve();
					}).catch(e => {
						this.errorMessage = e;
						resolve(e)
					});
				});
			}
		},
		computed: {
			selectValue() {
				let labelList = (this.selectedItems || []).map(item => item[this.props.label]);
				return labelList.length > 0 ? labelList.join(', ') : undefined;
			}
		},
		watch: {
			value: {
				handler() {
					this.getSelectUserList();
				},
				immediate: true
			}
		},
		mounted() {}
	}
</script>

<style>
</style>